<template>
	<view class="ranking-page pageBg">
		<view @click="fanhui()" class="fanhui">
			<uni-icons type="left" size="30"></uni-icons>
		</view>
		
		<view class="title">成员报修处理排行榜👑</view>
		
		<!-- 加载状态 -->
		<view v-if="loading" class="loading">
			<text>加载中...</text>
		</view>
		
		<!-- 排行榜列表 -->
		<view v-else-if="rankingList.length > 0" class="ranking-container">
			<view 
				v-for="(item, index) in rankingList" 
				:key="index" 
				class="ranking-item"
				:class="{ 'top-three': index < 3 }"
			>
				<!-- 排名图标 -->
				<view class="rank-icon">
					<text v-if="index === 0" class="crown">👑</text>
					<text v-else-if="index === 1" class="medal">🥈</text>
					<text v-else-if="index === 2" class="medal">🥉</text>
					<text v-else class="rank-number">{{ index + 1 }}</text>
				</view>
				
				<!-- 成员信息 -->
				<view class="member-info">
					<text class="member-name">{{ item.handler }}</text>
					<text class="member-count">处理次数: {{ item.count }}</text>
				</view>
				
				<!-- 排名数字 -->
				<view class="rank-number-large">
					<text>{{ index + 1 }}</text>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view v-else class="empty-state">
			<text>暂无排行榜数据</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { repairAPI } from '@/api/repair.js'
	
	const loading = ref(false)
	const rankingList = ref([])
	
	// 返回上一页
	const fanhui = () => {
		uni.navigateBack()
	}
	
	// 获取排行榜数据
	const getRankingData = async () => {
		try {
			loading.value = true
			const response = await repairAPI.getRepairRanking()
			
			if (response) {
				// 按处理次数降序排序
				rankingList.value = response.sort((a, b) => {
					return parseInt(b.count) - parseInt(a.count)
				})
			}
		} catch (error) {
			console.error('获取排行榜数据失败:', error)
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			})
		} finally {
			loading.value = false
		}
	}
	
	onMounted(() => {
		getRankingData()
	})
</script>

<style lang="scss" scoped>
	.ranking-page {
		min-height: 100vh; 
		padding: 20rpx;
	}
	
	.fanhui {
		position: fixed;
		top: 100rpx;
		left: 30rpx;
		z-index: 1000;
		width: 60rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	}
	
	.title {
		text-align: center;
		font-size: 48rpx;
		font-weight: bold; 
		margin: 120rpx 0 60rpx 0;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	}
	
	.loading {
		text-align: center;
		padding: 100rpx 0;
		color: white;
		font-size: 32rpx;
	}
	
	.ranking-container {
		padding: 0 20rpx;
	}
	
	.ranking-item {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
		transition: all 0.3s ease;
		
		&:hover {
			transform: translateY(-4rpx);
			box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.2);
		}
		
		&.top-three {
			background: #CCF0E0;
			border: 3rpx solid #68cea7;
			
			.member-name { 
				font-weight: bold;
			}
		}
	}
	
	.rank-icon {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
		
		.crown, .medal {
			font-size: 48rpx;
		}
		
		.rank-number {
			font-size: 32rpx;
			font-weight: bold;
			color: #666;
		}
	}
	
	.member-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		
		.member-name {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}
		
		.member-count {
			font-size: 28rpx;
			color: #666;
		}
	}
	
	.rank-number-large {
		width: 60rpx;
		height: 60rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		
		text {
			color: white;
			font-size: 28rpx;
			font-weight: bold;
		}
	}
	
	.empty-state {
		text-align: center;
		padding: 100rpx 0;
		color: white;
		font-size: 32rpx;
	}
</style>
